import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:yi_shop/route/index.dart';
import 'package:yi_shop/utils/colors.dart';
import 'package:yi_shop/utils/styles.dart';
import 'package:yi_shop/utils/svg.dart';
import 'package:yi_shop/utils/tools.dart';

class OrderConfirmUnContactController extends GetxController with GetTickerProviderStateMixin {
  RxInt count = 1.obs;

  double price = 4999.0;

  RxBool isInvoice = false.obs;

  late AnimationController animationController;

  late Animation<double> animation;

  late AnimationController sizeController;

  late Animation<double> sizeAnimation;

  @override
  void onInit() {
    animationController = AnimationController(
      duration: const Duration(milliseconds: 500),
      reverseDuration: const Duration(milliseconds: 200),
      vsync: this,
    );
    animation = CurvedAnimation(
      parent: animationController,
      curve: Curves.linear,
    );
    animationController.forward();

    sizeController = AnimationController(
        vsync: this,
        duration: const Duration(milliseconds: 500),
        reverseDuration: const Duration(milliseconds: 200));
    sizeAnimation = CurvedAnimation(parent: sizeController, curve: Curves.linear);
    sizeController.reverse();
    super.onInit();
  }

  void setIsInvoice(bool value) {
    isInvoice.value = value;
    if (value == false) {
      animationController.forward();
      sizeController.reverse();
      return;
    }
    animationController.reverse();
    sizeController.forward();
  }

  @override
  void onClose() {
    animationController.dispose();
    sizeController.dispose();
    super.onClose();
  }
}

class OrderConfirmUnContactPage extends GetView<OrderConfirmUnContactController> {
  const OrderConfirmUnContactPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: ToolsUtils.builderLeading(),
        title: Text(
          '确认订单',
          style: StylesUtils.customTextStyle(
            fontSize: StylesUtils.fontSize18,
            fontWeight: FontWeight.w700,
          ),
        ),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.only(bottom: 30),
        child: Column(
          children: [
            Container(
              height: 80,
              color: Colors.white,
              margin: const EdgeInsets.only(top: 20),
              child: Row(
                children: [
                  Expanded(
                      flex: 3,
                      child: Center(
                        child: SizedBox(
                          width: 30,
                          height: 30,
                          child: CustomPaint(
                            painter: _MyAddPaint(),
                          ),
                        ),
                      )),
                  Expanded(
                    flex: 4,
                    child: Align(
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '添加收货人',
                        style: StylesUtils.customTextStyle(
                          color: ColorsUtils.color3333,
                        ),
                      ),
                    ),
                  ),
                  Expanded(
                    flex: 2,
                    child: Center(
                      child: IconButton(
                          onPressed: () {
                            Get.toNamed(RoutePath.addressReceive);
                          },
                          icon: Icon(
                            Icons.arrow_forward_ios,
                            size: 20,
                            weight: 700,
                            color: ColorsUtils.parseColorFromHexString(ColorsUtils.color6666),
                          )),
                    ),
                  )
                ],
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: 20),
              color: Colors.white,
              child: ListBody(
                children: [
                  Container(
                    height: 45,
                    decoration: BoxDecoration(
                        border: Border(
                            bottom: BorderSide(
                                color:
                                    ColorsUtils.parseColorFromHexString(ColorsUtils.colorE4e4)))),
                    padding: const EdgeInsets.symmetric(horizontal: 15),
                    alignment: Alignment.centerLeft,
                    child: Wrap(
                      crossAxisAlignment: WrapCrossAlignment.center,
                      alignment: WrapAlignment.start,
                      spacing: 10,
                      children: [
                        SvgUtils.assetName('u13087', width: 20, height: 20),
                        Text(
                          '华为自营旗舰店',
                          style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                        ),
                        Icon(
                          Icons.arrow_forward_ios,
                          weight: 700,
                          size: 15,
                          color: ColorsUtils.parseColorFromHexString(ColorsUtils.color0000),
                        )
                      ],
                    ),
                  ),
                  Container(
                    padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                    child: Row(
                      children: [
                        CachedNetworkImage(
                          imageUrl:
                              'https://img.alicdn.com/img/i1/29539110/O1CN01JrHoUM2HAR6CWFoBr_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp',
                          width: 104,
                          height: 102,
                        ),
                        Expanded(
                            child: Container(
                          padding: const EdgeInsets.only(left: 10, right: 20),
                          child: Column(
                            children: [
                              Container(
                                alignment: Alignment.topLeft,
                                child: Text(
                                  '华为（HUAWEI）MateBook X 13英寸超轻薄微边框笔记本（i5-7200U 8G',
                                  maxLines: 2,
                                  overflow: TextOverflow.ellipsis,
                                  style: StylesUtils.customTextStyle(
                                      lineHeight: 1.2.h, color: ColorsUtils.color3333),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 15, bottom: 20),
                                alignment: Alignment.centerLeft,
                                child: Text(
                                  '颜色：（流光金）i5 8G+256G',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color9999,
                                      fontSize: StylesUtils.fontSize13),
                                ),
                              ),
                              Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                  Text(
                                    '￥ ${controller.price}',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.colorF95e,
                                        fontSize: StylesUtils.fontSize13),
                                  ),
                                  Text(
                                    '1.930kg x 1',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color9999,
                                        fontSize: StylesUtils.fontSize13),
                                  )
                                ],
                              )
                            ],
                          ),
                        ))
                      ],
                    ),
                  ),
                  Container(
                    margin: const EdgeInsets.only(top: 15),
                    padding: const EdgeInsets.only(left: 10, right: 20),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          '购买数量',
                          style: StylesUtils.customTextStyle(
                            color: ColorsUtils.color3333,
                          ),
                        ),
                        Wrap(
                          crossAxisAlignment: WrapCrossAlignment.center,
                          alignment: WrapAlignment.end,
                          spacing: 0,
                          children: [
                            InkWell(
                              onTap: () {
                                if (controller.count > 1) {
                                  controller.count--;
                                }
                              },
                              child: Container(
                                constraints: const BoxConstraints.expand(width: 27, height: 27),
                                decoration: BoxDecoration(
                                    border: Border.all(
                                        color: ColorsUtils.parseColorFromHexString(
                                            ColorsUtils.colorCccc))),
                                alignment: Alignment.center,
                                child: Text(
                                  '➖',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color3333,
                                      fontSize: StylesUtils.fontSize13),
                                ),
                              ),
                            ),
                            Container(
                              constraints: const BoxConstraints.expand(width: 40, height: 27),
                              alignment: Alignment.center,
                              decoration: BoxDecoration(
                                  border: Border(
                                top: BorderSide(
                                    color:
                                        ColorsUtils.parseColorFromHexString(ColorsUtils.colorCccc)),
                                bottom: BorderSide(
                                    color:
                                        ColorsUtils.parseColorFromHexString(ColorsUtils.colorCccc)),
                              )),
                              child: AnimatedSwitcher(
                                duration: const Duration(milliseconds: 500),
                                transitionBuilder: (Widget child, Animation<double> animation) {
                                  //执行缩放动画
                                  return ScaleTransition(scale: animation, child: child);
                                },
                                child: Obx(() => Text('${controller.count}',
                                    key: ValueKey<int>(controller.count.value),
                                    style: StylesUtils.customTextStyle(
                                        fontSize: StylesUtils.fontSize12,
                                        color: ColorsUtils.color0000))),
                              ),
                            ),
                            InkWell(
                              onTap: () {
                                controller.count++;
                              },
                              child: Container(
                                constraints: const BoxConstraints.expand(width: 27, height: 27),
                                decoration: BoxDecoration(
                                    border: Border.all(
                                        color: ColorsUtils.parseColorFromHexString(
                                            ColorsUtils.colorCccc))),
                                alignment: Alignment.center,
                                child: Text(
                                  '➕',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color3333,
                                      fontSize: StylesUtils.fontSize13),
                                ),
                              ),
                            )
                          ],
                        )
                      ],
                    ),
                  ),
                  Container(
                    margin: const EdgeInsets.only(top: 15),
                    padding: const EdgeInsets.only(left: 10, right: 20),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          '支付方式',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color3333, fontSize: StylesUtils.fontSize13),
                        ),
                        Text(
                          '在线支付',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color3333, fontSize: StylesUtils.fontSize13),
                        )
                      ],
                    ),
                  ),
                  Container(
                    margin: const EdgeInsets.only(top: 15),
                    padding: const EdgeInsets.only(left: 10, right: 20, bottom: 20),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          '快递方式',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color3333, fontSize: StylesUtils.fontSize13),
                        ),
                        Text(
                          '顺丰快递',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color3333, fontSize: StylesUtils.fontSize13),
                        )
                      ],
                    ),
                  ),
                ],
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: 20),
              color: Colors.white,
              child: ListBody(
                children: [
                  Container(
                    height: 40,
                    decoration: BoxDecoration(
                        border: Border(
                            bottom: BorderSide(
                                color:
                                    ColorsUtils.parseColorFromHexString(ColorsUtils.colorE4e4)))),
                    padding: const EdgeInsets.only(left: 10),
                    alignment: Alignment.centerLeft,
                    child: Text(
                      '优惠信息',
                      style: StylesUtils.customTextStyle(
                          color: ColorsUtils.color3333, fontSize: StylesUtils.fontSize13),
                    ),
                  ),
                  Container(
                    height: 40,
                    padding: const EdgeInsets.only(left: 10, right: 20),
                    alignment: Alignment.centerLeft,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          '满100减50',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color3333, fontSize: StylesUtils.fontSize13),
                        ),
                        Icon(
                          Icons.arrow_forward_ios,
                          size: 20,
                          color: ColorsUtils.parseColorFromHexString(ColorsUtils.color9999),
                        )
                      ],
                    ),
                  ),
                  Container(
                    padding: const EdgeInsets.only(left: 10, right: 20, bottom: 20),
                    alignment: Alignment.centerLeft,
                    child: Text.rich(TextSpan(children: [
                      TextSpan(
                          text: '1000积分',
                          style: StylesUtils.customTextStyle(color: ColorsUtils.color3333)),
                      TextSpan(
                          text: '（抵扣￥10.0）',
                          style: StylesUtils.customTextStyle(color: ColorsUtils.color9999))
                    ])),
                  )
                ],
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: 20),
              color: Colors.white,
              height: 40,
              alignment: Alignment.centerLeft,
              padding: const EdgeInsets.only(left: 10),
              child: Wrap(
                spacing: 20,
                crossAxisAlignment: WrapCrossAlignment.center,
                alignment: WrapAlignment.start,
                children: [
                  InkWell(
                    onTap: () {
                      // controller.isInvoice.value = false;
                      controller.setIsInvoice(false);
                    },
                    child: Text.rich(TextSpan(children: [
                      WidgetSpan(
                          child: SizedBox(
                            width: 20,
                            height: 20,
                            child: Obx(() => CustomPaint(
                                  painter: _MyInvoice(isInvoice: controller.isInvoice.isFalse),
                                )),
                          ),
                          alignment: PlaceholderAlignment.middle),
                      TextSpan(
                          text: '  不要发票',
                          style: StylesUtils.customTextStyle(color: ColorsUtils.color3333))
                    ])),
                  ),
                  InkWell(
                    onTap: () {
                      // controller.isInvoice.value = true;
                      controller.setIsInvoice(true);
                    },
                    child: Text.rich(TextSpan(children: [
                      WidgetSpan(
                          child: SizedBox(
                            width: 20,
                            height: 20,
                            child: Obx(() => CustomPaint(
                                  painter: _MyInvoice(isInvoice: controller.isInvoice.isTrue),
                                )),
                          ),
                          alignment: PlaceholderAlignment.middle),
                      TextSpan(
                          text: '  要发票',
                          style: StylesUtils.customTextStyle(color: ColorsUtils.color3333))
                    ])),
                  )
                ],
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: 20),
              padding: const EdgeInsets.all(10),
              color: Colors.white,
              child: Obx(() => Stack(
                    children: [
                      Visibility(
                        visible: controller.isInvoice.isFalse,
                        maintainAnimation: true,
                        maintainState: true,
                        child: ScaleTransition(
                          scale: controller.animation,
                          child: Column(
                            children: [
                              SizedBox(
                                height: 30,
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                  children: [
                                    Text(
                                      '商品金额',
                                      style:
                                          StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                                    ),
                                    Obx(() => Text(
                                          '￥ ${controller.count * controller.price}',
                                          style: StylesUtils.customTextStyle(
                                              color: ColorsUtils.colorF95e),
                                        ))
                                  ],
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 10),
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                  children: [
                                    Text(
                                      '运费',
                                      style:
                                          StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                                    ),
                                    Text(
                                      '￥ 20.0',
                                      style:
                                          StylesUtils.customTextStyle(color: ColorsUtils.colorF95e),
                                    )
                                  ],
                                ),
                              )
                            ],
                          ),
                        ),
                      ),
                      Visibility(
                          visible: controller.isInvoice.isTrue,
                          maintainAnimation: true,
                          maintainState: true,
                          child: ScaleTransition(
                            scale: controller.sizeAnimation,
                            child: Column(
                              children: [
                                Container(
                                  decoration: BoxDecoration(
                                      border: Border(
                                          bottom: BorderSide(
                                              color: ColorsUtils.parseColorFromHexString(
                                                  ColorsUtils.color9999)))),
                                  alignment: Alignment.centerLeft,
                                  padding: const EdgeInsets.only(bottom: 10),
                                  child: TextField(
                                    cursorHeight: 15,
                                    cursorWidth: 3,
                                    cursorColor:
                                        ColorsUtils.parseColorFromHexString(ColorsUtils.colorF048),
                                    cursorRadius: const Radius.circular(2),
                                    cursorOpacityAnimates: false,
                                    style:
                                        StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                                    decoration: InputDecoration(
                                        hintText: '填写发票抬头',
                                        hintStyle: StylesUtils.customTextStyle(
                                            color: ColorsUtils.color9999,
                                            fontSize: StylesUtils.fontSize13),
                                        border: InputBorder.none,
                                        focusedBorder: InputBorder.none,
                                        isCollapsed: false,
                                        isDense: false,
                                        contentPadding: EdgeInsets.zero,
                                        constraints: const BoxConstraints.expand(height: 30)),
                                  ),
                                ),
                                Container(
                                  decoration: BoxDecoration(
                                      border: Border(
                                          bottom: BorderSide(
                                              color: ColorsUtils.parseColorFromHexString(
                                                  ColorsUtils.color9999)))),
                                  alignment: Alignment.centerLeft,
                                  margin: const EdgeInsets.only(top: 15),
                                  padding: const EdgeInsets.only(bottom: 10),
                                  child: TextField(
                                    cursorHeight: 15,
                                    cursorWidth: 3,
                                    cursorColor:
                                        ColorsUtils.parseColorFromHexString(ColorsUtils.colorF048),
                                    cursorRadius: const Radius.circular(2),
                                    cursorOpacityAnimates: false,
                                    style:
                                        StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                                    decoration: InputDecoration(
                                      hintText: '填写纳税人识别号',
                                      hintStyle: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color9999,
                                          fontSize: StylesUtils.fontSize13),
                                      border: InputBorder.none,
                                      focusedBorder: InputBorder.none,
                                      isCollapsed: false,
                                      isDense: false,
                                      contentPadding: EdgeInsets.zero,
                                      constraints: const BoxConstraints.expand(height: 30),
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ))
                    ],
                  )),
            )
          ],
        ),
      ),
      bottomNavigationBar: SafeArea(
        bottom: true,
        child: Container(
          height: 50,
          color: Colors.white,
          child: Row(
            children: [
              Expanded(
                  child: Container(
                padding: EdgeInsets.only(left: 15.w),
                alignment: Alignment.centerLeft,
                child: Obx(() => Text.rich(TextSpan(
                        text: '应付款    ',
                        style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                        children: [
                          TextSpan(
                              text: '￥${controller.price * controller.count.value}',
                              style: StylesUtils.customTextStyle(
                                  color: ColorsUtils.colorF95e,
                                  fontSize: StylesUtils.fontSize18,
                                  fontWeight: FontWeight.w500))
                        ]))),
              )),
              TextButton(
                  onPressed: () {},
                  style: ButtonStyle(
                      minimumSize: const MaterialStatePropertyAll(Size(125, 50)),
                      alignment: Alignment.center,
                      shape: const MaterialStatePropertyAll(LinearBorder.none),
                      backgroundColor: MaterialStatePropertyAll(
                          ColorsUtils.parseColorFromHexString(ColorsUtils.colorF048))),
                  child: Text(
                    '提交订单',
                    style: StylesUtils.customTextStyle(fontSize: StylesUtils.fontSize18),
                  ))
            ],
          ),
        ),
      ),
    );
  }
}

class _MyAddPaint extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..strokeWidth = 6
      ..style = PaintingStyle.stroke
      ..isAntiAlias = true
      ..strokeCap = StrokeCap.round
      ..color = ColorsUtils.parseColorFromHexString(ColorsUtils.color6666);
    canvas.drawLine(Offset(0, size.height / 2), Offset(size.width, size.height / 2), paint);
    canvas.drawLine(Offset(size.width / 2, 0), Offset(size.width / 2, size.height), paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return this != oldDelegate;
  }
}

class _MyInvoice extends CustomPainter {
  final bool isInvoice;

  _MyInvoice({this.isInvoice = false});

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = ColorsUtils.parseColorFromHexString(ColorsUtils.color7979)
      ..strokeWidth = 1
      ..style = PaintingStyle.stroke
      ..isAntiAlias = true;
    if (isInvoice) {
      paint
        ..style = PaintingStyle.fill
        ..color = ColorsUtils.parseColorFromHexString(ColorsUtils.color8080);
    }
    canvas.drawCircle(Offset(size.width / 2, size.height / 2), size.width / 2, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return this != oldDelegate;
  }
}
